<template>
  <!-- 预约咨询 -->
  <div class="consulting-service" style="padding: 0px 10px; text-align: left">
      <!-- 内容 -->
      <h2 style="text-align: center; padding: 30px" class="bcl">预约咨询</h2>
      <ul>
          <li>{{storeName}}|{{proName}}</li>
          <li>快速查询│礼服预约试穿</li>
          <li>浪漫一夏│新娘线上婚紗展</li>
          <li>您好：</li>
          <li>在下方填写您的信息后，店员將尽快与您联系！</li>
      </ul>
      <!-- 表单 -->
      <el-form ref="formStata" :model="formStata"  style="width: 100%" :rules="rules" label-position="top">
        <!-- 时间 -->
        <div class="time">
           <el-form-item label="选择日期" >
              <van-tabs v-model="activeData" color="black" >
                <van-tab v-for="item in datas" :title="momentToStr(item)" :name="item.format('YYYY-MM-DD')">
                  <van-tabs v-model="activetime" type="card" color="black" style="margin-top: 5%; height: 30pxs;">
                    <van-tab title="9:00-11:30" name="9:00-11:30"></van-tab>
                    <van-tab title="14:00-17:00" name="14:00-17:00"></van-tab>
                    <van-tab title="19:00-21:00" name="19:00-21:00"></van-tab>
                  </van-tabs>
                </van-tab>
              </van-tabs>
            </el-form-item>
        </div>
        <!-- 基本信息 -->
        <div class="contact-information"  >
          <div style="padding-bottom: 10px;">基本信息</div>
          <el-form-item label="1.姓名" prop="uname">
            <input type="text" name="" id="" v-model="formStata.uname" />
          </el-form-item>
          <el-form-item label="2.电话" prop="phone">
            <input type="text" name="" id="" v-model="formStata.phone" />
          </el-form-item>
          <el-form-item label="3.预约人数:" prop="bodNumber">
            <van-stepper v-model="formStata.bodNumber" theme="round" input-width="10vw" button-size="8vw"  min="1" max="5" disable-input style="margin-bottom: 5%;"/>
            <p>为了更好的服务！最多到店人数为5人，感谢你是理解</p>
          </el-form-item>
        </div>
        <el-button 
          type="primary" 
          @click="submit(formStata)" style="width: 100%; margin-bottom: 50px; color:aliceblue; background-color: black;" 
          class="bcl">提交预约</el-button>
      </el-form>
      
  </div>
</template>

<script>
// main.js
import moment from 'moment'
export default {
  data() {
      return {
        datas: [],  
        activetime:'9:00-11:30',
        activeData:`${moment()}`,
        storeName:this.$route.query.title.Chinese,
        proName:this.$route.query.data.title,
        formStata:{
          preTime: '',
          uname:'',
          phone:'',
          bodNumber:'',
          uid:this.$store.state.uid,
          store_id:this.$route.query.title.store_id,
          westerndetail_id:this.$route.query.data.westerndetail_id,
          westerndetail :this.$route.query.data.title
        },
        // 定义验证规则
        rules: {
          uname: [
            { required: true, message: "用户名必填", trigger: "blur" },
          ],
          bodNumber: [
            { required: true, message: "必填", trigger: "blur" },
          ],
          phone: [
            { required: true, message: "必填", trigger: "blur" },
            { pattern: /^1[3-9]\d{9}$/, message: "手机号错误", trigger: "blur" },
          ],
        },
      };
  },
  methods: {
      momentToStr(item){
          let Week = ['日', '一', '二', '三', '四', '五', '六']
          // 获取星期几，得到：0,1,2,3,4,5,6
          let d = item.format('d')
          let str  = item.format(`周${Week[parseInt(d)]} MM月DD日`)
          return str
      },
      data(){
         // 构造连续7天的moment对象
        for(let i = 0 ; i< 7; i++){
          // add()添加，days当前时间
          let m = moment().add(i,'days')
          this.datas.push(m)
        }
      },
      submit(formStata) {
        this.formStata.preTime = this.activeData+' '+this.activetime
        this.$refs.formStata.validate((valid) => {
          if (valid) {
            // console.log(this.formStata,'表格');
            let params = `store_id=${this.formStata.store_id}&uid=${this.formStata.uid}&westerndetail_id=${this.formStata.westerndetail_id}&preTime=${this.formStata.preTime}&uname=${this.formStata.uname}&phone=${this.formStata.phone}&bodNumber=${this.formStata.bodNumber}&westerndetail=${this.formStata.westerndetail}`;
            this.axios.post("/reservation", params).then((res) => {
                  console.log(res,"yuy");
                  if(res.data.code == 200){
                    this.$message({
                      message: '恭喜预约成功，请耐心等待来电',
                      type: 'success'
                    });
                    // /reservation
                    this.$router.push("/reservation");
                    // this.$router.go(-1);
                  }else if(res.data.code === 201){
                      this.$message({
                        message: '感谢你的支持，请不能重复预约',
                        type: 'warning'
                      });
                  }
            });
          }
        })
      },
  },
  mounted(){
    if(!this.$route.query.title.Chinese || !this.$route.query.data.title ){
      this.$router.go(-1);
    }
     this.data()
  }
};
</script>
<style scoped src="@/assets/CSS/appointment.css">
</style>
<style lang="scss" scoped>
.consulting-service {
  ul {
      li {
          padding: 5px 0;
      }
  }
  .bcl {
      color: #000;
  }
}

.contact-information {
  margin: 20px 0;
  margin-top: 3vw;
  border: 1px solid white;
  background-color: white;
  border-radius: 7px;
  box-shadow:3px 5px ghostwhite ;
  padding: 8px;
  input {
      width: 80vw;
      height: 30px;
      border: 1px solid gray;
      border-radius: 5px;
      // margin: 10px 0;
      // padding:0 5px;
  }
}

.van-button--block {
  border: 1px solid gray;
  border-radius: 5px;
}

::v-deep .el-form-item__label{
   padding: 0;
}
::v-deep .el-form-item__content{
  line-height:0px
}

</style>
